<template>
  <el-dialog width="600px" title="认证资料" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <div class="flex idcard_wrap">
      <div class="flex-1">
        <p class="text-center img_header">身份证正面</p>
        <div class="img_wrap">
          <img v-if="idcard_front" :src="$globalObj.imgBaseUrl + idcard_front" class="w-100 h-100">
          <el-image-viewer v-if="showFront" :on-close="closeFront" :url-list="[$globalObj.imgBaseUrl + idcard_front]" />
        </div>
        <p class="text-center img_footer">
          <el-button size="mini" type="primary" @click="idcard_front && (showFront = true)">查看大图</el-button>
        </p>
      </div>
      <div class="flex-1">
        <p class="text-center img_header">身份证反面</p>
        <div class="img_wrap">
          <img v-if="idcard_back" :src="$globalObj.imgBaseUrl + idcard_back" class="w-100 h-100">
          <el-image-viewer v-if="showBack" :on-close="closeBack" :url-list="[$globalObj.imgBaseUrl + idcard_back]" />
        </div>
        <p class="text-center img_footer">
          <el-button size="mini" type="primary" @click="idcard_back && (showBack = true)">查看大图</el-button>
        </p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: { ElImageViewer },
  // props: ['editItem'],
  props: {
    editItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      showFront: false,
      showBack: false,
      idcard_back: '',
      idcard_front: ''
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.idcard_back = this.editItem.idcard_back
        this.idcard_front = this.editItem.idcard_front
      } else {
        this.idcard_back = ''
        this.idcard_front = ''
      }
    }
  },
  methods: {
    // 关闭预览
    closeFront() {
      this.showFront = false
    },
    closeBack() {
      this.showBack = false
    }
  }
}
</script>

<style lang="scss" scoped>
.idcard_wrap {
  border: 1px solid #eeeeee;

  &>div:first-child {
    border-right: 1px solid #eeeeee;
  }
}

.el-image-viewer__wrapper {
  z-index: 2090 !important;
}

.img_header {
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  color: #666666;
  font-size: 16px;
}

.img_wrap {
  width: 250px;
  height: 150px;
  margin: 20px auto;
  background-color: #8f8f8f;
}

.img_footer {
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eeeeee;
}
</style>
